<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust-Cool-Nginx - 服务器配置</title>
    <style>
        :root {
            --primary: #0ff;
            --secondary: #f0f;
            --dark: #0a0a1a;
            --darker: #050510;
            --light: #fff;
            --gray: #ccc;
            --gradient-start: #00dbde;
            --gradient-end: #fc00ff;
            --success: #0f0;
            --danger: #f00;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--darker);
            color: var(--light);
            min-height: 100vh;
            padding: 20px;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(10, 10, 30, 0.8);
            padding: 15px 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            border: 1px solid rgba(0, 255, 255, 0.2);
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-decoration: none;
        }

        .navbar-nav {
            display: flex;
            list-style: none;
        }

        .nav-item {
            margin-left: 20px;
        }

        .nav-link {
            color: var(--gray);
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 5px;
            transition: all 0.3s;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--primary);
            background: rgba(0, 255, 255, 0.1);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .page-header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .page-header p {
            color: var(--gray);
            font-size: 1.1rem;
        }

        .card {
            background: rgba(10, 10, 30, 0.8);
            border-radius: 10px;
            padding: 25px;
            border: 1px solid rgba(0, 255, 255, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .card-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--primary);
            display: flex;
            align-items: center;
        }

        .card-title i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .config-display {
            display: grid;
            gap: 15px;
        }

        .config-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid rgba(0, 255, 255, 0.1);
        }

        .config-item:last-child {
            border-bottom: none;
        }

        .config-key {
            color: var(--gray);
        }

        .config-value {
            font-weight: 500;
        }

        .config-value.enabled {
            color: var(--success);
        }

        .config-value.disabled {
            color: var(--danger);
        }

        .message {
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
            text-align: center;
            display: none;
        }

        .message.success {
            background: rgba(0, 100, 0, 0.3);
            border: 1px solid var(--success);
            color: var(--success);
            display: block;
        }

        .message.error {
            background: rgba(100, 0, 0, 0.3);
            border: 1px solid var(--danger);
            color: var(--danger);
            display: block;
        }

        .btn {
            padding: 12px 25px;
            border-radius: 5px;
            border: none;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-primary {
            background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 219, 222, 0.4);
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: var(--gray);
            border-top: 1px solid rgba(0, 255, 255, 0.1);
        }
        
        .actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <a class="navbar-brand" href="/">Rust-Cool-Nginx</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="config.html">配置</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="status.html">监控</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="static-file.html">静态文件</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <div class="page-header">
            <h1>服务器配置</h1>
            <p>查看 Rust-Cool-Nginx 服务器配置</p>
        </div>

        <div id="message" class="message"></div>

        <div class="card">
            <h2 class="card-title">
                <span>📋</span> 当前配置
            </h2>
            <div class="config-display">
                <div class="config-item">
                    <div class="config-key">监听地址:</div>
                    <div class="config-value" id="listen_addr_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">后端地址:</div>
                    <div class="config-value" id="backend_addr_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">静态文件根目录:</div>
                    <div class="config-value" id="static_root_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">访问日志:</div>
                    <div class="config-value" id="access_log_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">错误日志:</div>
                    <div class="config-value" id="error_log_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">日志级别:</div>
                    <div class="config-value" id="log_level_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">SSL证书路径:</div>
                    <div class="config-value" id="ssl_cert_path_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">SSL密钥路径:</div>
                    <div class="config-value" id="ssl_key_path_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">SSL启用:</div>
                    <div class="config-value" id="ssl_enabled_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">静态文件服务:</div>
                    <div class="config-value" id="static_file_serving_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">反向代理:</div>
                    <div class="config-value" id="reverse_proxy_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">FastCGI 支持:</div>
                    <div class="config-value" id="fastcgi_support_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">访问控制:</div>
                    <div class="config-value" id="access_control_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">请求频率限制:</div>
                    <div class="config-value" id="rate_limiting_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">SSL/TLS:</div>
                    <div class="config-value" id="ssl_tls_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">负载均衡:</div>
                    <div class="config-value" id="load_balancing_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">负载均衡算法:</div>
                    <div class="config-value" id="load_balancing_algorithm_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">上游服务器数量:</div>
                    <div class="config-value" id="upstream_servers_count">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">上游服务器详情:</div>
                    <div class="config-value" id="upstream_servers_details">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">缓存机制:</div>
                    <div class="config-value" id="caching_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">缓存路径:</div>
                    <div class="config-value" id="cache_path_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">缓存最大大小:</div>
                    <div class="config-value" id="cache_max_size_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">缓存非活动时间:</div>
                    <div class="config-value" id="cache_inactive_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">Gzip 压缩:</div>
                    <div class="config-value" id="gzip_compression_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">Gzip 压缩级别:</div>
                    <div class="config-value" id="gzip_comp_level_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">Gzip 最小长度:</div>
                    <div class="config-value" id="gzip_min_length_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">虚拟主机:</div>
                    <div class="config-value" id="virtual_hosts_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">WebSocket 支持:</div>
                    <div class="config-value" id="websocket_support_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">工作进程数:</div>
                    <div class="config-value" id="worker_processes_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">工作连接数:</div>
                    <div class="config-value" id="worker_connections_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">监控启用:</div>
                    <div class="config-value" id="monitoring_enabled_display">-</div>
                </div>
                <div class="config-item">
                    <div class="config-key">统计路径:</div>
                    <div class="config-value" id="stats_path_display">-</div>
                </div>
            </div>
            
            <div class="actions">
                <button type="button" class="btn btn-primary" id="edit-config-btn">编辑配置</button>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>© 2025 Rust-Cool-Nginx - 高性能 Web 服务器 | 基于 Rust 和 Tokio 构建</p>
        </div>
    </footer>

    <script>
        // 检查是否在 Tauri 环境中运行
        var isTauri = false;
        
        // 通过API获取实际的配置信息
        async function loadConfig() {
            console.log('开始加载配置...');
            console.log('isTauri:', isTauri);
            
            // 无论是否检测到 Tauri 环境，都尝试多种方式获取配置
            try {
                let config;
                
                // 首先尝试 Tauri 方式
                if (isTauri && window.__TAURI__) {
                    console.log('在Tauri环境中，尝试调用Tauri命令');
                    try {
                        // 尝试不同的 Tauri API 调用方式
                        if (window.__TAURI__.core && typeof window.__TAURI__.core.invoke === 'function') {
                            console.log('使用 window.__TAURI__.core.invoke 方法');
                            config = await window.__TAURI__.core.invoke('get_config');
                        } else if (typeof window.__TAURI__.invoke === 'function') {
                            console.log('使用 window.__TAURI__.invoke 方法');
                            config = await window.__TAURI__.invoke('get_config');
                        } else if (window.__TAURI__.tauri && typeof window.__TAURI__.tauri.invoke === 'function') {
                            console.log('使用 window.__TAURI__.tauri.invoke 方法');
                            config = await window.__TAURI__.tauri.invoke('get_config');
                        } else {
                            throw new Error('未找到有效的 Tauri 调用方法');
                        }
                        console.log('通过Tauri获取到的配置:', config);
                    } catch (tauriError) {
                        console.error('Tauri调用失败:', tauriError);
                        throw tauriError;
                    }
                } else {
                    // 如果不是 Tauri 环境或 Tauri 对象不存在，尝试通过 HTTP API 获取配置
                    console.log('通过HTTP API获取配置');
                    // 构建正确的API地址
                    let apiUrl;
                    if (window.location.origin === 'http://tauri.localhost') {
                        // 在 Tauri 环境中，后端运行在 127.0.0.1:80
                        apiUrl = 'http://127.0.0.1:80/api/config';
                    } else {
                        // 在 Web 环境中，使用当前域名和端口
                        apiUrl = `${window.location.origin}/api/config`;
                    }
                    console.log('API URL:', apiUrl);
                    
                    const response = await fetch(apiUrl);
                    const contentType = response.headers.get('content-type');
                    
                    if (contentType && contentType.includes('application/json')) {
                        // 检查响应是否为 JSON 格式
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        config = await response.json();
                        console.log('通过HTTP API获取到的配置:', config);
                    } else {
                        // 如果响应不是 JSON 格式，抛出错误
                        const text = await response.text();
                        console.log('HTTP API 响应内容:', text);
                        console.error('HTTP API 返回非 JSON 响应:', text.substring(0, 100) + '...');
                        throw new Error('HTTP API 返回非 JSON 响应');
                    }
                }
                
                // 填充配置显示区域
                populateConfigDisplay(config);
                return config;
            } catch (error) {
                console.error('获取配置信息失败:', error);
                
                // 显示错误信息
                showMessage('加载配置信息失败: ' + error.message, 'error');
                
                // 提供默认配置作为备选方案
                console.log('使用默认配置');
                const defaultConfig = {
                    server: {
                        listen_addr: '127.0.0.1:80',
                        backend_addr: '',
                        static_root: './public'
                    },
                    upstream: {
                        load_balancing_algorithm: 'round_robin',
                        servers: []
                    },
                    features: {
                        static_file_serving: true,
                        reverse_proxy: true,
                        fastcgi_support: false,
                        load_balancing: false,
                        cache_enabled: false,
                        gzip_compression: false,
                        virtual_hosts: false,
                        access_control: false,
                        rate_limiting: false,
                        ssl_tls: false,
                        websocket_support: true,
                        monitoring_enabled: true,
                        stats_path: '/nginx_status'
                    }
                };
                
                // 填充默认配置
                populateConfigDisplay(defaultConfig);
                return defaultConfig;
            }
        }
        
        // 填充配置显示区域
        function populateConfigDisplay(config) {
            console.log('填充显示区域数据:', config);
            try {
                // 服务器配置
                document.getElementById('listen_addr_display').textContent = config.server.listen_addr || '127.0.0.1:80';
                document.getElementById('backend_addr_display').textContent = config.server.backend_addr || '未设置';
                document.getElementById('static_root_display').textContent = config.server.static_root || './public';
                document.getElementById('access_log_display').textContent = config.server.access_log || './logs/access.log';
                document.getElementById('error_log_display').textContent = config.server.error_log || './logs/error.log';
                document.getElementById('log_level_display').textContent = config.server.log_level || 'info';
                document.getElementById('ssl_cert_path_display').textContent = config.server.ssl_cert_path || '未设置';
                document.getElementById('ssl_key_path_display').textContent = config.server.ssl_key_path || '未设置';
                document.getElementById('ssl_enabled_display').textContent = config.server.ssl_enabled ? '已启用' : '已禁用';
                document.getElementById('ssl_enabled_display').className = 'config-value ' + (config.server.ssl_enabled ? 'enabled' : 'disabled');
                
                // 基本 HTTP 服务
                document.getElementById('static_file_serving_display').textContent = config.features.static_file_serving ? '已启用' : '已禁用';
                document.getElementById('static_file_serving_display').className = 'config-value ' + (config.features.static_file_serving ? 'enabled' : 'disabled');
                
                document.getElementById('reverse_proxy_display').textContent = config.features.reverse_proxy ? '已启用' : '已禁用';
                document.getElementById('reverse_proxy_display').className = 'config-value ' + (config.features.reverse_proxy ? 'enabled' : 'disabled');
                
                document.getElementById('fastcgi_support_display').textContent = config.features.fastcgi_support ? '已启用' : '已禁用';
                document.getElementById('fastcgi_support_display').className = 'config-value ' + (config.features.fastcgi_support ? 'enabled' : 'disabled');
                
                // 安全特性
                document.getElementById('access_control_display').textContent = config.features.access_control ? '已启用' : '已禁用';
                document.getElementById('access_control_display').className = 'config-value ' + (config.features.access_control ? 'enabled' : 'disabled');
                
                document.getElementById('rate_limiting_display').textContent = config.features.rate_limiting ? '已启用' : '已禁用';
                document.getElementById('rate_limiting_display').className = 'config-value ' + (config.features.rate_limiting ? 'enabled' : 'disabled');
                
                document.getElementById('ssl_tls_display').textContent = config.features.ssl_tls ? '已启用' : '已禁用';
                document.getElementById('ssl_tls_display').className = 'config-value ' + (config.features.ssl_tls ? 'enabled' : 'disabled');
                
                // 其他功能
                document.getElementById('load_balancing_display').textContent = config.features.load_balancing ? '已启用' : '已禁用';
                document.getElementById('load_balancing_display').className = 'config-value ' + (config.features.load_balancing ? 'enabled' : 'disabled');
                
                document.getElementById('caching_display').textContent = config.features.cache_enabled ? '已启用' : '已禁用';
                document.getElementById('caching_display').className = 'config-value ' + (config.features.cache_enabled ? 'enabled' : 'disabled');
                
                document.getElementById('gzip_compression_display').textContent = config.features.gzip_compression ? '已启用' : '已禁用';
                document.getElementById('gzip_compression_display').className = 'config-value ' + (config.features.gzip_compression ? 'enabled' : 'disabled');
                
                document.getElementById('virtual_hosts_display').textContent = config.features.virtual_hosts ? '已启用' : '已禁用';
                document.getElementById('virtual_hosts_display').className = 'config-value ' + (config.features.virtual_hosts ? 'enabled' : 'disabled');
                
                document.getElementById('websocket_support_display').textContent = config.features.websocket_support ? '已启用' : '已禁用';
                document.getElementById('websocket_support_display').className = 'config-value ' + (config.features.websocket_support ? 'enabled' : 'disabled');
                
                // 缓存配置
                document.getElementById('cache_path_display').textContent = config.features.cache_path || '未设置';
                document.getElementById('cache_max_size_display').textContent = config.features.cache_max_size || '未设置';
                document.getElementById('cache_inactive_display').textContent = config.features.cache_inactive || '未设置';
                
                // Gzip配置
                document.getElementById('gzip_comp_level_display').textContent = config.features.gzip_comp_level || '未设置';
                document.getElementById('gzip_min_length_display').textContent = config.features.gzip_min_length || '未设置';
                
                // 工作进程配置
                document.getElementById('worker_processes_display').textContent = config.features.worker_processes || '未设置';
                document.getElementById('worker_connections_display').textContent = config.features.worker_connections || '未设置';
                
                // 监控配置
                document.getElementById('monitoring_enabled_display').textContent = config.features.monitoring_enabled ? '已启用' : '已禁用';
                document.getElementById('monitoring_enabled_display').className = 'config-value ' + (config.features.monitoring_enabled ? 'enabled' : 'disabled');
                document.getElementById('stats_path_display').textContent = config.features.stats_path || '/nginx_status';
                
                // 负载均衡配置
                document.getElementById('load_balancing_algorithm_display').textContent = getLoadBalancingAlgorithmName(config.upstream.load_balancing_algorithm) || '轮询';
                document.getElementById('upstream_servers_count').textContent = config.upstream.servers ? config.upstream.servers.length : 0;
                
                // 显示上游服务器详情
                if (config.upstream.servers && Array.isArray(config.upstream.servers) && config.upstream.servers.length > 0) {
                    let serversDetails = '';
                    config.upstream.servers.forEach((server, index) => {
                        serversDetails += `服务器${index + 1}: ${server.address || '未设置'}\n`;
                        if (server.weight) serversDetails += `  权重: ${server.weight}\n`;
                        if (server.max_fails) serversDetails += `  最大失败次数: ${server.max_fails}\n`;
                        if (server.fail_timeout) serversDetails += `  失败超时: ${server.fail_timeout}\n`;
                        serversDetails += '\n';
                    });
                    document.getElementById('upstream_servers_details').textContent = serversDetails;
                } else {
                    document.getElementById('upstream_servers_details').textContent = '未配置上游服务器';
                }
            } catch (e) {
                console.error('填充显示区域时出错:', e);
                showMessage('填充显示区域时出错: ' + e.message, 'error');
            }
        }

        // 显示消息
        function showMessage(text, type) {
            const messageEl = document.getElementById('message');
            messageEl.textContent = text;
            messageEl.className = `message ${type}`;
            
            // 3秒后自动隐藏
            setTimeout(() => {
                messageEl.className = 'message';
            }, 3000);
        }
        
        // 获取负载均衡算法名称
        function getLoadBalancingAlgorithmName(algorithm) {
            const algorithms = {
                'round_robin': '轮询 (Round Robin)',
                'least_conn': '最少连接 (Least Connections)',
                'ip_hash': 'IP哈希 (IP Hash)'
            };
            return algorithms[algorithm] || algorithm;
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 增加延迟确保 Tauri 完全初始化
            setTimeout(function() {
                // 检查多种可能的 Tauri 对象存在形式
                console.log('检查 Tauri 环境...');
                console.log('window.__TAURI__:', window.__TAURI__);
                console.log('window.location.protocol:', window.location.protocol);
                
                // 检查是否在 Tauri 环境中运行
                if (window.__TAURI__) {
                    console.log('检测到 window.__TAURI__');
                    isTauri = true;
                    
                    // 检查各种可能的 invoke 方法
                    if (typeof window.__TAURI__.invoke === 'function') {
                        console.log('window.__TAURI__.invoke 是函数');
                    } else if (window.__TAURI__.core && typeof window.__TAURI__.core.invoke === 'function') {
                        console.log('window.__TAURI__.core.invoke 是函数');
                    } else if (window.__TAURI__.tauri && typeof window.__TAURI__.tauri.invoke === 'function') {
                        console.log('window.__TAURI__.tauri.invoke 是函数');
                    } else {
                        console.log('window.__TAURI__ 存在但没有找到 invoke 方法');
                    }
                } else if (window.location.protocol === 'tauri:') {
                    console.log('检测到 tauri 协议，标记为 Tauri 环境');
                    isTauri = true;
                } else {
                    console.log('未检测到 Tauri 环境，将使用Web模式');
                    isTauri = false;
                }
                
                console.log('Tauri environment check result:', isTauri);
                
                // 延迟加载配置
                setTimeout(function() {
                    loadConfig();
                }, 100);
            }, 500); // 延迟 500ms 确保 Tauri 完全初始化
            
            // 绑定编辑配置按钮事件
            document.getElementById('edit-config-btn').addEventListener('click', function() {
                window.location.href = 'edit-config.html';
            });
        });
    </script>
</body>
</html>